<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" :width="695" destroy-on-close @closed="$emit('closed')">
		<div ref="printTable" style="padding: 10px;">
			<h2 style="text-align: center;">伊丽文服饰有限公司</h2>
			<br>
			<el-row>
				<el-col :span="8">客户：{{finance.company_name}}</el-col>
				<el-col :span="8">时间：{{finance.created_at}}</el-col>
				<el-col :span="8">上次欠款：{{finance.last_debt}}</el-col>
			</el-row>
			<el-row>
				<el-col :span="8">数量总计：{{finance.stock_sum}}</el-col>
				<el-col :span="8">本次金额：¥{{finance.price}}</el-col>
				<el-col :span="8">累计欠款：{{finance.now_debt}}</el-col>
			</el-row>
			<el-divider content-position="left">明细</el-divider>
			<table style="border-collapse: collapse; text-align: center;">
				<thead style="padding: 0; margin: 0;">
					<th class="mxtd" width="80">货号</th>
					<th class="mxtd" width="80">颜色</th>
					<th class="mxtd" width="80">尺码</th>
					<th class="mxtd" width="80">数量</th>
					<th class="mxtd" width="80">单价/元</th>
					<th class="mxtd" width="100">小记/元</th>
				</thead>

				<tbody style="padding: 0; margin: 0;">
					<template v-for="(data, goods_number) in finance.detail.print_data" :key="goods_number">
						<template v-for="(color_data, color) in data" :key="color">
							<template v-for="(size_data, size) in color_data" :key="size">
								<tr width="100%">
									<td class="mxtd">{{goods_number}}</td>
									<td class="mxtd">{{color}}</td>
									<td class="mxtd">{{size}}</td>
									<td class="mxtd">{{size_data['num']}}</td>
									<td class="mxtd">{{size_data['price']}}</td>
									<td class="mxtd">{{size_data['total']}}</td>
								</tr>
							</template>
						</template>
						
					</template>
				</tbody>
			</table>
		</div>
		<template #footer>
			<el-button @click="visible=false" >取 消</el-button>
			<el-button type="primary" :loading="isSaveing" @click="print">打 印</el-button>
		</template>
	</el-dialog>
</template>

<script>
	import print from '@/utils/print'
	export default {
		emits: ['success', 'closed'],
		data() {
			return {
				mode: "add",
				titleMap: {
					add: '新增',
					edit: '编辑',
					show: '查看'
				},
				visible: false,
				isSaveing: false,
				finance: {},
				//表单数据
				
				//验证规则
				
				//所需数据选项
				groups: [],
				groupsProps: {
					value: "id",
					emitPath: false,
					checkStrictly: true
				}
			}
		},
		mounted() {

		},
		methods: {
			//显示
			open(mode='add'){
				this.mode = mode;
				this.visible = true;
				return this
			},
			//表单提交方法
			print(){
				print(this.$refs.printTable)
			},
			//表单注入数据
			setData(data){
				console.log(data)
				//可以和上面一样单个注入，也可以像下面一样直接合并进去
				Object.assign(this.finance, data)
			}
		}
	}
</script>

<style>
	.mxtd {
		border: 1px solid black;
		border-collapse: collapse;
	}
</style>
